<template>
  <div class="common-layout" >
    <el-container class="container">
      <el-header>
        <div >
          <h1 style="color:#409eff">后台管理</h1>
          
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" >
          <el-menu
          default-active="welcome"
          :router="true"
          class="el-menu-vertical-demo"
      >
        <el-menu-item index="welcome">
          <span>
            欢迎
            </span>
        </el-menu-item>
        <el-sub-menu>
          <template #title>
            <span>系统中心</span>
          </template>
          
          <el-menu-item-group >
            <el-menu-item index="user">用户管理</el-menu-item>
          </el-menu-item-group>

        </el-sub-menu>
        <el-sub-menu >
          <template #title>
            <span>选课中心</span>
          </template>
          
          <el-menu-item-group >
            <el-menu-item index="choose">课程管理</el-menu-item>
          </el-menu-item-group>

        </el-sub-menu>
        
      </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { RouterView } from "vue-router";
</script>

<style>
.common-layout{
  height: 100vh;
}
.container{
  height: 100%;
}
.el-main {
  padding: 0 !important;
  border-top:#c1c1c1 solid 1px
}
.el-aside{
  border-top:#c1c1c1 solid 1px;
  border-right:#c1c1c1 solid 1px 
}
</style>